<template>
  <div class="container" style="display: flex">
    <!-- 左侧组件 -->
    <draggable
      :list="tasks"
      :group="{ name: 'gi', pull: 'clone', put: false }"
      item-key="name"
      ghost-class="ghost-class"
      :move="move"
      :clone="clone"
      style="background: yellow"
    >
      <template #item="{ element }">
        <div class="item">
          <img src="https://sortablejs.github.io/vue.draggable.next/img/logo.c6a3753c.svg" class="icon" />
          <div class="title">{{ element.name }}</div>
        </div>
      </template>
    </draggable>

    <!-- 右侧嵌套拖拽渲染区 -->
    <Layout :list="newTasks" style="flex: 1; background: #f0f0f0; padding: 10px" />
  </div>
</template>

<script>
import Layout from "./components/layout.vue";
import { cloneDeep } from "lodash";
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
    Layout,
  },
  data() {
    return {
      tasks: [
        // 示例数据
        { name: "Task 1", tasks: [[], [], []] },
        { name: "Task 2", tasks: [[], [], []] },
        { name: "Task 3", tasks: [[], [], []] },
      ],
      newTasks: [],
    };
  },
  methods: {
    move(e) {
      const classList = Array.from(e?.to?.classList);
      const isRelatedNested = classList?.includes("nested-container");
      if (e?.draggedContext?.element?.tasks && isRelatedNested) return false;
      return true;
    },
    clone(e) {
      console.log(e);

      return cloneDeep({ ...e });
    },
  },
};
</script>

<style scoped>
.container {
  width: 100vw;
}
.item {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  background-color: #f9f9f9;
}

.icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.title {
  color: #000;
  font-size: 16px;
}

.ghost-class {
  background: rgb(255, 158, 158);
}
</style>
